<!-- 品种登记，新增 -->
<template>
<div>
    <el-drawer :model-value="props.isShow" size="800px" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">    
        <template #header>
            <h4 style="font-weight: bold;">品种登记</h4>
        </template>
        <div class="imitateTable">
            <div class="cattlePhotoRow">
                <div>
                    <el-upload
                        class="avatar-uploader"
                        action="/api/upload/image"
                        :show-file-list="false"
                        :auto-upload="false"
                        :on-change="uploadLeftPhoto"
                    >
                        <img v-if="form.leftPhoto" :src="form.leftPhoto" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                    <div class="direction">左侧照</div>
                </div>
                <div class="middle">
                    <el-upload
                        class="avatar-uploader"
                        action="/api/upload/image"
                        :show-file-list="false"
                        :auto-upload="false"
                        :on-change="uploadFrontPhoto"
                    >
                        <img v-if="form.frontPhoto" :src="form.frontPhoto" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                    <div class="direction">正前照</div>
                </div>
                <div>
                    <el-upload
                        class="avatar-uploader"
                        action="/api/upload/image"
                        :show-file-list="false"
                        :auto-upload="false"
                        :on-change="uploadRightPhoto"
                    >
                        <img v-if="form.rightPhoto" :src="form.rightPhoto" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                    <div class="direction">右侧照</div>
                </div>
            </div>
            <div class="ordinaryRow">
                <div class="tdWidth borderR"><span>场名</span></div>
                <div class="widthMaim">
                    <el-input v-model="form.farmName" style="height: 40px;" placeholder="请输入场名" />
                </div>
                <div class="tdWidth borderRL"><span>品种</span></div>
                <div class="ordinaryTd" style="display: flex; align-items: center;">
                    <span style="padding-left: 10px; font-size: 14px;">{{ form.breed }}</span>
                </div>
            </div>
            <div class="ordinaryRow">
                <div class="tdWidth borderR"><span>地址</span></div>
                <div class="widthMaim">
                    <el-input v-model="form.address" style="height: 40px;" placeholder="请输入地址" />
                </div>
                <div class="tdWidth borderRL"><span>血统纯度(%)</span></div>
                <div class="ordinaryTd">
                    <el-input v-model="form.purity" style="height: 40px;" placeholder="请输入血统纯度" />
                </div>
            </div>
            <div class="ordinaryRow">
                <div class="tdWidth borderR"><span>肉牛登记号</span></div>
                <div class="widthMaim">
                    <el-input v-model="form.registrationNumber" style="height: 40px;" placeholder="请输入肉牛登记号" />
                </div>
                <div class="tdWidth borderRL"><span>生产管理号</span></div>
                <div class="ordinaryTd">
                    <el-select clearable filterable v-model="form.cowId" @clear="clearItem">
                        <el-option v-for="item in allComNameList" :label="`${item.code}-${item.breed}`" :value="item.id" @click="selectItem(item)" />
                    </el-select>
                </div>
            </div>
            <div class="ordinaryRow">
                <div class="tdWidth borderR"><span style="line-height: 17px; font-size: 14px;">DNA检测信息</span></div>
                <div class="widthMaim">
                    <el-input v-model="form.dnaTestingInfo" style="height: 40px;" placeholder="请输入DNA检测信息" />
                </div>
                <div class="tdWidth borderRL"><span>是否多胎</span></div>
                <div class="ordinaryTd isNo">
                    <el-radio-group v-model="form.multipleBirth">
                        <el-radio :value="true">是</el-radio>
                        <el-radio :value="false">否</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="recordBox">
                <div class="recordTitle"><span style="line-height: 20px;">遗传资源入库情况</span></div>
                <div class="recordcheck">
                    <div class="checkItem">
                        <span class="checkName" style="font-size: 14px;">组织采集：</span>
                        <el-radio-group v-model="form.hasTissueCollection">
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false">否</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="checkItem">
                        <span class="checkName" style="font-size: 14px;">DNA提取：</span>
                        <el-radio-group v-model="form.hasDnaExtraction">
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false">否</el-radio>
                        </el-radio-group>
                        
                    </div>
                    <div class="checkItem">
                        <span class="checkName" style="font-size: 14px;">基因分型：</span>
                        <el-radio-group v-model="form.hasGenotype">
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false">否</el-radio>
                        </el-radio-group>
                        <template v-if="form.hasGenotype == true ? true : false">
                        <span style="margin-left: 20px;">(</span>
                        <span style="font-size: 14px;">分型技术方法：</span>
                        <el-radio-group v-model="form.somatotype" style="margin-left: 10px;">
                            <el-radio :value="1" size="large">2代测序</el-radio>
                            <el-radio :value="2" size="large">基因芯片</el-radio>
                        </el-radio-group>
                        <span>)</span>
                        </template>
                    </div>
                    <div class="checkItem">
                        <span class="checkName" style="font-size: 14px;">系谱：</span>
                        <el-radio-group v-model="form.hasPedigree">
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false">否</el-radio>
                        </el-radio-group>
                    </div>

                    <!-- <div class="checkItem">
                        <el-checkbox v-model="checked4" />
                        <span class="checkName">DNA提取：是/否</span>
                        <span>（</span>
                        <span>分型技术方法：</span>
                        <el-checkbox v-model="checked4" />
                        <span style="margin-left: 10px; margin-right: 10px;">2代测序</span>
                        <el-checkbox v-model="checked4" />
                        <span style="margin-left: 10px;">基因芯片</span>
                        <span>）</span>
                    </div> -->
                    <!-- <div class="checkItem">
                        <el-checkbox v-model="checked4" />
                        <span class="checkName">基因分型：是/否</span>
                    </div> -->
                    <!-- <div class="checkItem">
                        <el-checkbox v-model="checked4" />
                        <span class="checkName">系谱</span>
                    </div> -->
                </div>
            </div>
            <div class="estimate">
                <div class="estimateTitle"><span>估计育种值</span></div>
                <div class="estimateValue">
                    <el-input type="number" v-model="form.estimatedBreedingValue" placeholder="请输入估计育种值" />
                </div>
            </div>
            <div class="estimate">
                <div class="estimateTitle"><span>种群分类</span></div>
                <div class="estimateValue">
                    <el-radio-group v-model="form.group">
                        <el-radio value="20008">核心母牛</el-radio>
                        <el-radio value="20009">基础母牛</el-radio>
                        <el-radio value="20010">核心种公牛</el-radio>
                        <el-radio value="20011">基础种公牛</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="sixBox">
                <div class="gender">性别</div>
                <div class="genderValue">
                    <span style="padding-left: 10px; font-size: 14px;">{{ form.gender }}</span>
                </div>
                <div class="birthday">出生日期</div>
                <div class="birthdayValue">
                    <!-- <el-date-picker style="height: 40px; width: 140px;" v-model="form.birthday" type="date" placeholder="选择出生日期" /> -->
                    <span style="padding-left: 10px; font-size: 14px;">{{ form.birthday }}</span>
                </div>
                <div class="individuality" style="font-size: 14px;">是否胚胎个体</div>
                <div class="individualityValue">
                    <el-radio-group v-model="form.embryo">
                        <el-radio :value="true">是</el-radio>
                        <el-radio :value="false">否</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="sourceBox">
                <div class="sourceTitle">来源</div>
                <div class="sourceValue">
                    <el-input v-model="form.source" style="height: 40px;" placeholder="请输入来源信息" />
                </div>
                <div class="sourceType">国别/引种种公牛站</div>
                <div class="sourceTypeValue">
                    <el-input v-model="form.sourceFarmCountry" style="height: 40px; width: 100%;" placeholder="请输入" />
                </div>
                <div class="transferTime" style="font-size: 14px;">种牛转移时间</div>
                <div class="transferTimeValue">
                    <el-date-picker value-format="YYYY-MM-DD" style="height: 40px; width: 140px;" v-model="form.bullTransferDate" type="date" placeholder="选择转移时间" />
                </div>
            </div>
            <template v-if="form.hasPedigree == true ? true : false">
            <div class="pedigreeRowTitle">系谱</div>
            <div class="fatherBox">
                <div class="father">
                    <span>父亲：</span>
                    <el-input v-model="form.father" style="height: 40px;" placeholder="请输入" />
                </div>
                <div class="greenFather">
                    <div class="greenFatherItem borderBottom">
                        <div class="Box2b">
                            <div class="greenFatherItemTitle" style="border-bottom: 1px solid #666666;">
                                <div class="zufu">祖父：</div>
                                <el-input v-model="form.grandfather" style="height: 40px;" placeholder="请输入祖父" />
                            </div>
                            <div class="greenFatherItemTitle">
                                <div class="zufu">祖母：</div>
                                <el-input v-model="form.grandmother" style="height: 40px;" placeholder="请输入祖母" />
                            </div>
                        </div>
                        <div class="distantTitleBox">
                            <div>曾祖父</div>
                            <div style="border-top: 1px solid #666666; border-bottom: 1px solid #666666; box-sizing: border-box;">曾祖母</div>
                            <div>曾外祖父</div>
                            <div style="border-top: 1px solid #666666; box-sizing: border-box;">曾外祖母</div>
                        </div>
                        <div class="distantInput">
                            <div class="inputItem">
                                <el-input v-model="form.greatGrandfather" style="height: 38px;" placeholder="请输入曾祖父" />
                            </div>
                            <div class="inputItem" style="border-top: 1px solid #666666; border-bottom: 1px solid #666666; box-sizing: border-box;">
                                <el-input v-model="form.greatGrandmother" style="height: 38px;" placeholder="请输入曾祖母" />
                            </div>
                            <div class="inputItem">
                                <el-input v-model="form.greatGreatGrandfather" style="height: 38px;" placeholder="请输入曾外祖父" />
                            </div>
                            <div class="inputItem" style="border-top: 1px solid #666666;">
                                <el-input v-model="form.greatGreatGrandmother" style="height: 38px;" placeholder="请输入曾外祖母" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fatherBox">
                <div class="father">
                    <span>母亲：</span>
                    <el-input v-model="form.mother" style="height: 40px;" placeholder="请输入" />
                </div>
                <div class="greenFather">
                    <div class="greenFatherItem borderBottom">
                        <div class="Box2b">
                            <div class="greenFatherItemTitle" style="border-bottom: 1px solid #666666;">
                                <div class="zufu">外祖父：</div>
                                <el-input v-model="form.maternalGrandfather" style="height: 40px;" placeholder="请输入外祖父" />
                            </div>
                            <div class="greenFatherItemTitle">
                                <div class="zufu">外祖母：</div>
                                <el-input v-model="form.maternalGrandmother" style="height: 40px;" placeholder="请输入外祖母" />
                            </div>
                        </div>
                        <div class="distantTitleBox">
                            <div>外曾祖父</div>
                            <div style="border-top: 1px solid #666666; border-bottom: 1px solid #666666; box-sizing: border-box;">外曾祖母</div>
                            <div>外曾外祖父</div>
                            <div style="border-top: 1px solid #666666; box-sizing: border-box;">外曾外祖母</div>
                        </div>
                        <div class="distantInput">
                            <div class="inputItem">
                                <el-input v-model="form.maternalGreatGrandfather" style="height: 38px;" placeholder="请输入外曾祖父" />
                            </div>
                            <div class="inputItem" style="border-top: 1px solid #666666; border-bottom: 1px solid #666666; box-sizing: border-box;">
                                <el-input v-model="form.maternalGreatGrandmother" style="height: 38px;" placeholder="请输入外曾祖母" />
                            </div>
                            <div class="inputItem">
                                <el-input v-model="form.maternalGreatGreatGrandfather" style="height: 38px;" placeholder="请输入外曾外祖父" />
                            </div>
                            <div class="inputItem" style="border-top: 1px solid #666666;">
                                <el-input v-model="form.maternalGreatGreatGrandmother" style="height: 38px;" placeholder="请输入外曾外祖母" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </template>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelHandler">关闭</el-button>
                <el-button type="primary" @click="confirmHandler">确认</el-button>
            </span>
        </template>
    </el-drawer>
</div>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import { reqGetBreedList } from '@/api/cattleStructure'
import { reqGetComNameList } from '@/api/company'
import { reqUploadImage, reqCowRegistrationAdd } from '@/api/daily'
import { ElMessage } from 'element-plus'

// 引入用户相关小仓库
import useUserStore from '@/store/modules/user'
let userStore = useUserStore()

// 接收父组件传递过来的数据
let props = defineProps(['isShow'])
// 注册自定义事件
let $emit = defineEmits(['closeDialog'])

// 表单收集
const form = reactive({
    cowId: '', // 母牛id
    farmName: userStore.companyName, // 厂名
    breed: '', // 品种
    address: userStore.companyAddress, // 地址
    purity: '', // 血统纯度
    registrationNumber: '', // 肉牛登记号
    managementNumber: '', // 生产管理号
    dnaTestingInfo: '', // 相关DNA检测信息
    multipleBirth: false, // 是否多胎
    hasTissueCollection: false, // 组织采集
    hasDnaExtraction: false, // DNA提取
    hasGenotype: false, // 基因分型
    somatotype: '', // 分型技术方法
    hasPedigree: false, // 系谱
    estimatedBreedingValue: '', // 估计育种值
    group: '', // 种群分类
    gender: '', // 性别
    birthday: '', // 出生日期
    embryo: false , // 是否胚胎个体
    source: '', // 来源
    sourceFarmCountry: '', // 国别/引种种公牛站
    bullTransferDate: '', // 种牛转移时间
    leftPhoto: '', // 左侧照
    frontPhoto: '', // 正前照
    rightPhoto: '', // 右侧照
    father: '', // 父亲
    grandfather: '', // 祖父
    grandmother: '', // 祖母
    greatGrandfather: '', // 曾祖父
    greatGrandmother: '', // 曾祖母
    greatGreatGrandfather: '', // 曾外祖父
    greatGreatGrandmother: '', // 曾外祖母
    mother: '', // 母亲
    maternalGrandfather: '', // 外祖父
    maternalGrandmother: '', // 外祖母
    maternalGreatGrandfather: '', // 外曾祖父
    maternalGreatGrandmother: '', // 外曾祖母
    maternalGreatGreatGrandfather: '', // 外曾外祖父
    maternalGreatGreatGrandmother: '', // 外曾外祖母
})

// 置空表单
const cleanForm = () => {
    form.cowId = '', // 母牛id
    form.farmName = '', // 厂名
    form.breed = '', // 品种
    form.address = '', // 地址
    form.purity = '', // 血统纯度
    form.registrationNumber = '', // 肉牛登记号
    form.managementNumber = '', // 生产管理号
    form.dnaTestingInfo = '', // 相关DNA检测信息
    form.multipleBirth = false, // 是否多胎
    form.hasTissueCollection = false, // 组织采集
    form.hasDnaExtraction = false, // DNA提取
    form.hasGenotype = false, // 基因分型
    form.somatotype = '', // 分型技术方法
    form.hasPedigree = false, // 系谱
    form.estimatedBreedingValue = '', // 估计育种值
    form.group = '', // 种群分类
    form.gender = '', // 性别
    form.birthday = '', // 出生日期
    form.embryo = false , // 是否胚胎个体
    form.source = '', // 来源
    form.sourceFarmCountry = '', // 国别/引种种公牛站
    form.bullTransferDate = '', // 种牛转移时间
    form.leftPhoto = '', // 左侧照
    form.frontPhoto = '', // 正前照
    form.rightPhoto = '', // 右侧照
    form.father = '', // 父亲
    form.grandfather = '', // 祖父
    form.grandmother = '', // 祖母
    form.greatGrandfather = '', // 曾祖父
    form.greatGrandmother = '', // 曾祖母
    form.greatGreatGrandfather = '', // 曾外祖父
    form.greatGreatGrandmother = '', // 曾外祖母
    form.mother = '', // 母亲
    form.maternalGrandfather = '', // 外祖父
    form.maternalGrandmother = '', // 外祖母
    form.maternalGreatGrandfather = '', // 外曾祖父
    form.maternalGreatGrandmother = '', // 外曾祖母
    form.maternalGreatGreatGrandfather = '', // 外曾外祖父
    form.maternalGreatGreatGrandmother = '' // 外曾外祖母
}

// 获取牛品种，筛选下拉列表
let breedList = ref([])
const getBreedList = async () => {
    let res = await reqGetBreedList()
    breedList.value = res.data
}

// 获取牛号下拉列表（生产管理号）
let allComNameList = ref([])
const getComNameList = async () => {
    let res = await reqGetComNameList()
    allComNameList.value = res.data
}

// 选择生产管理号，赋值性别，年龄，品种
const selectItem = (item) => {
    form.cowId = item.id
    form.gender = item.genderName
    form.breed = item.breed
    if(item.birthday){
        form.birthday = item.birthday
    }else{
        console.log('此生产管理号，没有出生日期')
    }
}

// 清除 生产管理号时触发
const clearItem = () => {
    form.cowId = ''
    form.gender = ''
    form.breed = ''
    form.birthday = ''
}

// 上传左侧照
const uploadLeftPhoto = (data) => {
    let file = data.raw
    let fd = new FormData()
    fd.append('file', file)
    reqUploadImage(fd).then((res) => {
        if(res.status == 200){
            form.leftPhoto = res.data
        }
    })
}

// 上传正面照
const uploadFrontPhoto = (data) => {
    let file = data.raw
    let fd = new FormData()
    fd.append('file', file)
    reqUploadImage(fd).then((res) => {
        if(res.status == 200){
            form.frontPhoto = res.data
        }
    })
}

// 上传右侧照
const uploadRightPhoto = (data) => {
    let file = data.raw
    let fd = new FormData()
    fd.append('file', file)
    reqUploadImage(fd).then((res) => {
        if(res.status == 200){
            form.rightPhoto = res.data
        }
    })
}

// 关闭按钮
const cancelHandler = () => {
    $emit('closeDialog', false)
}

// 确认按钮
const confirmHandler = async () => {
    let res = await reqCowRegistrationAdd(form)
    if(res.status == 200){
        ElMessage({
            type: 'success',
            message: '新增成功'
        })
        $emit('closeDialog', false)
        cleanForm()
    }
}

// 组件挂载完毕
onMounted(() => {
    getBreedList()
    getComNameList()
})
</script>

<style scoped lang="scss">
// :deep(.el-drawer__header) {
//     margin-bottom: 0;
//     color: #000;
// }
.dialog-footer button:first-child {
    margin-right: 10px;
}
// 左中右照片
:deep(.avatar-uploader) {
    display: flex;
    justify-content: center;
    width: 130px;
    height: 130px;
    margin: 0 auto;
}
:deep(.avatar-uploader .avatar) {
  width: 130px;
  height: 130px;
  display: block;
}
:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  text-align: center;
}
// 左中右照片 end
.imitateTable{
    border: 1px solid #666;
    border-bottom: none;
    // 表格中的输入框，样式修改
    ::v-deep(.el-input__wrapper) {
        --el-input-border-color: #ffffff;
        --el-input-border-radius: 0px;
        --el-input-focus-border-color: #ffffff;
        --el-input-hover-border-color: #ffffff; 
    }
    // 表格中的下拉框，样式修改
    
    .cattlePhotoRow{
        display: flex;
        border-bottom: 1px solid #666;
        & > div{
                flex: 1;
                padding: 10px;
           .imgIcon{
                display: block;
                margin: 0 auto;
                width: 60px;
                height: 80px;
                opacity: 0.65;
                border-radius: 5px;
           }
           .direction{
                text-align: center;
                margin-top: 5px;
                font-size: 12px;
                color: #666;
           }
        }
        .middle{
            border-left: 1px solid #666;
            border-right: 1px solid #666;
            box-sizing: border-box;
        }
    }
    .ordinaryRow{
        display: flex;
        border-bottom: 1px solid #666;
        .ordinaryTd{
            flex: 1;
        }
        .isNo{
            display: flex;
            align-items: center;
            flex: 1;
            .el-radio-group{
                padding-left: 10px;
            }
        }
        .borderR{
            box-sizing: border-box;
            border-right: 1px solid #666;
        }
        .borderRL{
            box-sizing: border-box;
            border-right: 1px solid #666;
            border-left: 1px solid #666;
        }
        .widthMaim{
            flex: 1;
        }
        .tdWidth{
            width: 100px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            span{
                text-align: center;
            }
        }
    }
    .recordBox{
        display: flex;
        border-bottom: 1px solid #666;
        .recordTitle{
            border-right: 1px solid #666;
            width: 100px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            span{
                display: inline-block;
                padding: 0 10px;
                text-align: center;
                line-height: 16px;
            }
        }
        .recordcheck{
            padding-left: 10px;
            .checkItem{
                display: flex;
                align-items: center;
                .el-checkbox{
                    margin-right: 0;
                }
                .checkName{
                    min-width: 75px;
                }
            }
        }
    }
    .estimate{
        display: flex;
        border-bottom: 1px solid #666;
        .estimateTitle{
            width: 100px;
            border-right: 1px solid #666;
            box-sizing: border-box;
            text-align: center;
            height: 40px;
            line-height: 40px;
        }
        .estimateValue{
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
            .el-radio-group{
                .el-radio{
                    margin-right: 10px;
                }
            }
        }
    }
    .sixBox{
        display: flex;
        border-bottom: 1px solid #666;
        .gender{
            text-align: center;
            width: 100px;
            line-height: 40px;
            border-right: 1px solid #666;
            box-sizing: border-box;
        }
        .genderValue{
            width: 163px;
            border-right: 1px solid #666;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            .el-radio-group{
                flex-wrap: nowrap;
                padding-left: 10px;
                .el-radio{
                    margin-right: 10px;
                }
            }
        }
        .birthday{
            width: 100px;
            border-right: 1px solid #666;
            box-sizing: border-box;
            text-align: center;
            line-height: 40px;
        }
        .birthdayValue{
            flex: 1;
            border-right: 1px solid #666;
            box-sizing: border-box;
            display: flex;
            align-items: center;
        }
        .individuality{
            width: 100px;
            text-align: center;
            line-height: 40px;
            border-right: 1px solid #666;
            box-sizing: border-box;
        }
        .individualityValue{
            display: flex;
            align-items: center;
            flex: 1;
            .el-radio-group{
                padding-left: 10px;
                .el-radio{
                    margin-right: 10px;
                }
            }
            
        }
    }
    .sourceBox{
        display: flex;
        border-bottom: 1px solid #666;
        .sourceTitle{
            text-align: center;
            width: 100px;
            line-height: 40px;
            border-right: 1px solid #666;
            box-sizing: border-box;
        }
        .sourceValue{
            width: 163px;
            padding-left: 10px;
            border-right: 1px solid #666;
            box-sizing: border-box;
            display: flex;
            align-items: center;
        }
        .sourceType{
            width: 100px;
            border-right: 1px solid #666;
            box-sizing: border-box;
            line-height: 18px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .sourceTypeValue{
            flex: 1;
            border-right: 1px solid #666;
            box-sizing: border-box;
        }
        .transferTime{
            width: 100px;
            border-right: 1px solid #666;
            box-sizing: border-box;
            line-height: 40px;
            text-align: center;
        }
        .transferTimeValue{
            flex: 1;
        }
    }
    .pedigreeRowTitle{
        text-align: center;
        line-height: 34px;
        border-bottom: 1px solid #666666;
        box-sizing: border-box;
    }
    .fatherBox{
        display: flex;
        border-bottom: 1px solid #666666;
        height: 161px;
        box-sizing: border-box;
        .father{
            width: 230px;
            border-right: 1px solid #666666;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            flex-direction: column;
            span{
                padding: 0px 10px;
            }
        }
        .greenFather {
            flex: 1;
            .greenFatherItem {
                display: flex;
                height: 160px;
                .Box2b{
                    flex: 1;
                    height: 80px;
                    .greenFatherItemTitle{
                        box-sizing: border-box;
                        height: 80px;
                        flex: 1;
                        border-right: 1px solid #666666;
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        .zufu{
                            padding-left: 10px;
                        }
                    }
                }
                .distantTitleBox{
                    border-right: 1px solid #666666;
                    width: 100px;
                    div{
                        height: 40px;
                    }
                    .borderBottom{
                        border-bottom: 1px solid #666666;
                        box-sizing: border-box;
                    }
                    div {
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                    }
                }
                .distantInput{
                    flex: 1;
                    height: 80px;
                    .inputItem{
                        height: 40px;
                    }
                }
            }
        }
    }
}
</style>